<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>图书管理系统</title>
    <meta name="description" content="图书管理系统">
    <meta name="keywords" content="图书管理系统">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/elementui/index.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div id="app">
    <div class="login-container">
        <div class="loginBox">
            <el-form ref="dataEditForm" :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
                     class="demo-ruleForm" style="top: 50%;left: 35%">
                <div class="title-container">
                    <div class="logoInfo clearfix">
                        <div class="alert alert-info">
                            欢迎登录图书馆管理系统
                        </div>
                    </div>
                </div>
                <el-form-item prop="user_name">
                    <el-input placeholder="用户名" type="user_name" v-model="ruleForm.user_name"
                              style="padding-left: 0px"></el-input>
                </el-form-item>
                <el-form-item prop="user_password">
                    <el-input type="password" placeholder="密码" v-model="ruleForm.user_password"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input type="code" v-model="ruleForm.code" placeholder="验证码">
                        <template slot="append">
                            <img id="num" :src="code_url"/>
                            <!--									从Vue中调用名为getImage()的方法-->
                            <a href="javascript:;" @click="getVertifyCode">换一张</a>
                        </template>
                    </el-input>
                </el-form-item>
                <div style="padding-left: 200px;display: inline-block">
                    <span>没有账号？</span>
                    <a style="color: #66b1ff" href="regist.html">点击注册</a>
                </div>
                <el-button type="primary" @click="submitForm('ruleForm')" style="display: block;margin-left: 235px">提交
                </el-button>
            </el-form>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="./js/vue.js"></script>
<script src="./plugins/elementui/index.js"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                ruleForm: {
                    user_name: '',
                    user_password: '',
                    code: ''
                },
                rules: {
                    user_name: [{required: true, message: '账号为必填项', trigger: 'blur'}],
                    user_password: [{required: true, message: '密码为必填项', trigger: 'blur'}]
                },
                code_url: ''
            }
        },
        created() {
            this.getVertifyCode() // 页面初始化从后端加载验证码
        },
        methods: {

            // 获取验证码
            async getVertifyCode() {
                axios.get("/login/getVertifyCodeImage.do?time=" + Math.random()).then((res) => {
                    console.log(res)
                    this.code_url = res.data // 验证码图片渲染
                })
            },
            submitForm(formName) {
                this.$refs['dataEditForm'].validate((valid) => {
                    if (valid) {
                        axios.post("/login/login.do", this.ruleForm).then((res) => {
                            console.log(res.data);
                            if (res.data.flag) {
                                this.$message({
                                    message: res.data.message,
                                    type: 'success'
                                });
                                location.href = "/pages/main.html?user_name=" + res.data.data.user_name;
                            } else {
                                this.$message.error(res.data.message);
                            }
                        });
                    } else {
                        console.log('请输入账号和密码');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })
</script>
</html>
